<template>
	<view class="app">
		<load :ready="ready"></load>

		<u-form :model="form" ref="uForm">
			<view class="content">
				<u-form-item label="开票类型" label-width="150">
					<!-- <u-radio-group v-model="type">
						<u-radio  name="1">电子发票</u-radio>
					</u-radio-group> -->
					
					<u-radio-group  v-model="btype" @change="radioGroupChange" size="30" :wrap="false">
						<u-radio :name="1">电子发票</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label="发票类型" label-width="150">
					<u-radio-group  v-model="form.billingType" @change="radioGroupChange" size="30" :wrap="false">
						<u-radio v-for="(item, index) in typeList" :name="item.id"><text
								style="font-size: 12px;">{{item.name}}</text></u-radio>
					</u-radio-group>
				</u-form-item>
			</view>


			<view class="content" v-if="form.billingType == 1">
				<u-form-item label="姓名" label-width="200" prop="name"><u-input placeholder="请填写姓名"
						v-model="form.name" /></u-form-item>
				<u-form-item label="邮箱" label-width="200" prop="email"><u-input placeholder="请填写接受邮箱"
						v-model="form.email" /></u-form-item>
				<u-form-item label="备注" label-width="200" :border-bottom="false"><u-input placeholder="请输入备注"
						v-model="form.remark" /></u-form-item>
			</view>


			<view class="content" v-if="form.billingType == 2">
				<u-form-item label="单位名称" label-width="200" prop="name"><u-input placeholder="请填写单位全称"
						v-model="form.name" /></u-form-item>
				<u-form-item label="纳税人识别号" label-width="200" prop="taxpayerNumber"><u-input placeholder="请填写纳税人识别号"
						v-model="form.taxpayerNumber" /></u-form-item>

				<u-form-item label="邮箱" label-width="200" prop="email"><u-input placeholder="请填写接收邮箱"
						v-model="form.email" /></u-form-item>
				<u-form-item label="单位地址" label-width="200" prop="address"><u-input placeholder="请填写单位详细地址"
						v-model="form.address" /></u-form-item>
				<u-form-item label="联系电话" label-width="200" prop="mobile"><u-input placeholder="请输入联系电话"
						v-model="form.mobile" /></u-form-item>
				<u-form-item label="开户行" label-width="200" prop="openingBank"><u-input placeholder="请填写单位开户行名称"
						v-model="form.openingBank" /></u-form-item>
				<u-form-item label="银行账号" label-width="200" prop="bankAccount"><u-input placeholder="请填写单位开户行银行账号"
						v-model="form.bankAccount" /></u-form-item>

				<u-form-item label="备注" label-width="200" :border-bottom="false"><u-input placeholder="请输入备注"
						v-model="form.remark" /></u-form-item>
			</view>
		</u-form>

		<u-gap height="30"></u-gap>

		<view class="btnbox">
			<u-button type="primary" shape="circle" @click="submit()" :custom-style="btnStyle">确定添加</u-button>
		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations,
		mapGetters
	} from 'vuex';
	import {
		mixinsBase
	} from '@/common/js/mixins';
	let that;
	export default {
		mixins: [mixinsBase],
		components: {},
		data() {
			return {
				ready:false,
				showCalendar: false,
				current: 0,
				showState: false,
				type: 1,
				typeList: [{
						id: 1,
						name: '普通发票(个人)',
					},
					{
						id: 2,
						name: '普通发票(单位)',
					},
				],
				btype:1,
				current: 0,
				form: {
					invoiceType: 1,
					billingType: 1,
					type: 1,
				},
				btnStyle: this.$config.btnStyle,
				id: null,
				rules: {
					name: [{
						required: true,
						message: '名称不能为空',
						trigger: ['blur', 'change']
					}],
					taxpayerNumber: [{
						required: true,
						message: '纳税人识别号',
						trigger: ['blur', 'change']
					}],
					address: [{
						required: true,
						message: '单位地址',
						trigger: ['blur', 'change']
					}],
					openingBank: [{
						required: true,
						message: '开户行',
						trigger: ['blur', 'change']
					}],
					bankAccount: [{
						required: true,
						message: '银行账号',
						trigger: ['blur', 'change']
					}],
					email: [{
							required: true,
							message: '邮箱不能为空',
							trigger: ['blur', 'change']
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.email(value);
							},
							message: '邮箱号不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					// 字段名称
					mobile: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					]
				},
			
			};
		},
		onLoad(o) {
			that = this;
			if (o.id) {
				this.id = o.id
				uni.setNavigationBarTitle({
					title: '编辑开票'
				})
				this.getInit();
			} else {
				this.ready = true
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onShow() {
			// #ifdef H5
			this.$common.h5SetTitle('');
			// #endif
		},
		onUnload() {
			that = null;
		},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {
			// this.getInit(data=>{
			//      uni.stopPullDownRefresh();
			//      common.showTip('刷新成功');
			// });
		},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},

		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {
			//       return {
			// 	// path,
			// 	imageUrl:config.shareImg,
			// 	// title
			// }
		},
		methods: {
			async getInit() {
				let res = await this.$api.billingInfo({
					id: this.id
				});
				if (res.data.code == this.$config.RESOK) {
					let form = res.data.data;
					this.form = form;
					this.ready = true
				} else {
					this.$message.error(res.data.msg);
				}
			},
			async submit() {
				console.log('submit')
				let istrue = true
				this.$refs.uForm.validate(valid => {
					console.log(valid);
					if (valid) {
						console.log('验证通过');
					} else {
						console.log('验证失败');
						istrue = false
					}
				});
				console.log('istrue', istrue);
				if (!istrue) return
				this.isLoading = true
				let res;
				if (this.id) {
					res = await this.$api.billingEdit({
						...this.form,
						idt: this.id,
					});
				} else {
					res = await this.$api.billingSave({
						...this.form,
					});
				}
				this.isLoading = false;
				if (res.data.code == this.$config.RESOK) {
					uni.$emit('addBill')
					// this.$common.showTip(res.data.msg);
					this.$common.showTip(this.id ? '修改成功' : '添加成功');
					setTimeout(() => {
						uni.navigateBack()
					}, this.$config.timeLoad);
				} else {
					this.$message.error(res.data.msg);
				}
			},
			handleTab(e) {
				this.current = e;
			},
			radioGroupChange(e){
				console.log(e);
				// this.$refs.uForm.resetFields()
			},
			...mapActions([])
		},
		computed: {
			...mapState({
				userInfo: 'userInfo'
			})
		}
	};
</script>

<style scoped lang="scss">
	page {
		background-color: #f5f5f5;
	}
	
	.app{
		padding: 0 30rpx;
	}
	

	.content {
		background: #fff;
		border-radius: 10px;
		padding: 0 30rpx;
		margin-top: 20rpx;
	}

	.form-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		.icon-bank {
			width: 20px;
			height: 20px;
			margin-right: 5px;
		}
		.bank-name {
			font-size: 14px;
			flex: 1;
		}
	}

	.btnbox {
		padding: 30rpx 0;
	}
</style>